<!-- 分销订单 -->
<template>
	<view class="index-box page">
		<status-bar title='分销订单'></status-bar>
		<view class="menuList">
			<view class="nav_top_box" :style="{top:navHeight+System.statusBarHeight+'px'}">
				<view class="navlists" :style="{'--color': color}" :class="navTab==1?'navAction thmeColor':'pageColor'" @click="navclick(1,0)"><text>收益订单</text></view>
				<view class="navlists" :style="{'--color': color}" :class="navTab==2?'navAction thmeColor':'pageColor'" @click="navclick(2,1)"><text>退款订单</text></view>
				<view class="Advertising_article thmeBg" :style="{'--color': color,left: 50 * (navTab - 1) + '%'}"></view>
			</view>
		</view>
		<view class="firiends">
			<view class="Afriend" v-for="(item,index) in distribution_list" :key="index">
				<image class="friHead" @error="item.v_headimg=''" :src="item.v_headimg?item.v_headimg:staticUrl+'/images/jh_up/head.jpg'" mode=""></image>
				<view class="friMsg">
					<view class="friName">
						<text class="name">{{item.v_name}}</text>
						<template v-if="item.status == 0">
							<text class="right state2" v-if="parseInt(item.state) < 4">待确认</text>
							<text class="right state2" v-if="parseInt(item.state) > 3">待入账</text>
						</template>
						<text class="right state1" v-if="item.status == 1">已入账</text>
						<text class="right state2" v-if="item.status == 2">已退款</text>
					</view>
					<view class="flex-box align-center">
						<view class="flex">
							<view class="friTime">
								<text>订单号：{{item.order_code}}</text>
							</view>
							<view class="friName">
								<text class="name" >{{item.add_time}}</text>
							</view>
						</view>
						<text class="right bonus">{{item.money}}</text>
					</view>
				</view>
			</view>
		</view>
		<empty v-if='noData' type='1' cat='3' :msg='navTab==1?"你还没有收益订单哦 ~":"你还没有退款订单哦 ~"'></empty>
		<backTop v-if='toTop'></backTop>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that;
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				navTab: 1,
				toTop: false,
				brokerage_list: [],
				noData: false,
				distribution_list: "" ,
				channel:'',  // 入口团队管理
			}
		},
		onShow() {
			that = this
			that.distribution_order()
		},
		onLoad(e) {
			let that = this;
			if(e.state == 1){
				that.channel = 2;
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.toTop = true;
			} else {
				this.toTop = false;
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid +'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share','vid']),
		},
		methods: {
			navclick(i, positions){
				that.navTab = i;
				that.distribution_order()
			},
			distribution_order(){
				let that = this;
				that.noData = false
				that.$http.post({
					url: '/zzj_singleSaleApi/distribution_list',
					data: {
						type: that.navTab,
						channel:that.channel
					}
				}).then(res => {
					if(res.errcode == 100){
						that.distribution_list = res.data
					}
					if(!that.distribution_list || that.distribution_list.length < 1){
						that.noData = true
					}
				})
			}
		}
	}
</script>

<style scoped>
	.right{
		float: right;
	}
	.state1{color: #84E491;}
	.state2{color: #FFC000;}
	.bonus{
		color: #FF4400;
		font-size: 32upx;
		font-weight: bold;
	}
	.nav_top_box{
		width: 100%;
		height: 88upx;
		background: #FFFFFF;
		line-height: 88upx;
		font-size: 28upx;
		color: #333333;
		position: fixed;
		left: 0;right: 0;
		z-index: 99;
		top: 0;
		box-shadow: 0 0 5px 0px rgba(0,0,0,.1);
	}
	.navlists{
		width: 50%;
		display: inline-block;
		text-align: center;
		font-size: 28upx;
	}
	.pageColor{color: #999999;}
	.navAction{
		position: relative;
	}
	.Advertising_article{
		width: 50upx;
		height: 4upx;
		position: absolute;
		bottom: 0;
		transition: left .2s;
		border-radius: 4upx;
		transform: translateX(160upx);
	}
	
	.firiends{
		padding-top: 88rpx;
		background-color: white;
	}
	.Afriend{
		display: flex;
		justify-content: space-between;
		padding: 30upx;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.friHead{
		height: 128upx;
		width: 128upx;
		margin-right: 30upx;
	}
	.friName{
		color: #222222;
		font-size: 24upx;
	}
	.friName .name{
		font-size: 28upx;
	}
	.friTime{
		color: #9C9C9C;
		font-size: 24upx;
		margin: 10upx 0;
	}
	.friMsg{
		flex: 1;
	}
	.Afriend:nth-last-child(1){
		border-bottom: none;
	}
</style>
